<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryList" :inline="true" label-width="68px">
        <el-form-item label="商品名称">
          <el-input v-model="queryList.productName" placeholder="请输入商品名称" clearable style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input v-model="queryList.productCode" placeholder="请输入商品编号" clearable style="width:100%" />
        </el-form-item>
        <el-form-item label="助记码">
          <el-input v-model="queryList.mnemonicCode" placeholder="请输入助记码" clearable style="width:100%" />
        </el-form-item>
        <el-form-item label="仓库">
          <el-select filterable clearable v-model="queryList.stoId" placeholder="请选择仓库" @change="getCkId" style="width: 100%">
            <el-option v-for="(item, index) in wareHouseData" :key="index" :value="item.stoId" :label="item.stoName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
           <el-button type="primary" icon="el-icon-plus" v-hasPermi="['basic:nccBasic:add']" @click="addDialog('add')">新增</el-button>
          <el-button type="primary" icon="el-icon-search" @click="filterDire">查询</el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="clearAll">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="commoditiesList" border height="605px">
        <el-table-column type="index" label="序号" align="center"> </el-table-column>
        <el-table-column prop="productCode" label="商品编码" align="center"></el-table-column>
        <el-table-column prop="productName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="productShortName" label="简称" align="center"></el-table-column>
        <el-table-column prop="productSpec" label="规格" align="center"></el-table-column>
        <el-table-column prop="unitName" label="单位" align="center"></el-table-column>
        <el-table-column prop="mnemonicCode" label="助记码" align="center"></el-table-column>
        <el-table-column prop="storageCondition" label="储存条件" width="180" align="center"></el-table-column>
        <el-table-column prop="approvalNum" label="批准文号" align="center"></el-table-column>
        <el-table-column prop="manufacturer" label="生产厂家" align="center"></el-table-column>
        <el-table-column label="是否启用" align="center">
          <template slot-scope="scope">
            <el-switch :value="scope.row.enableState" :active-value="1" :inactive-value="0" active-color="#13ce66"
                        inactive-color="#ff4949"
                       @change="toggleState(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="addDialog('edit', scope.row)"
             :disabled="scope.row.enableState === 1">详情</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete"
                       @click="deleteBtn(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="queryList.pageNum" :page-size="queryList.pageSize"
        :page-sizes="[10, 20, 50,100]" :total="total">
      </el-pagination>
    </el-card>
    <commodityAdd ref="commodityAddRef" :visible.sync="visible" @addSuccess="addSuccess" />
  </div>
</template>

<script>
import commodityAdd from "@/components/BasicInformation/commodityAdd.vue"
import {
  findNccBasicSkuInfoData,//列表
  nccBasicSkuInfoEnableStatusUpdate,//启用状态
  deleteBasicSkuInfoData,//删除
} from '@/api/basic/PersonnelInformation.js'
import {
  getAllWarehouseList,//仓库下拉
} from "@/api/index/yxl.js";
export default {
  components: {
    commodityAdd
  },
  data() {
    return {
      queryList: {},
      commoditiesList: [], //el-table数据
      total: 0,
      visible: false,
      loading:false,
      wareHouseData:[],//仓库
    };
  },
  created() {
    this.getNccCommoditiesList();
    this.getSelect();
  },
  methods: {
    //仓库切换
    getCkId(val){
      this.queryList.stoId = val;
      this.getDataList();
    },
    //仓库下拉获取
    getSelect(){
      getAllWarehouseList().then(res=>{
        this.wareHouseData = res.data;
        this.getNccCommoditiesList();
      })
    },
    //删除
    deleteBtn(row) {
      this.$confirm(`确认要进行删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBasicSkuInfoData({id:row.id}).then(res => {
          this.$message.success(res.data.msg);
          this.getNccCommoditiesList();
        })
      }).catch(()=>{
        this.$message.info('已取消');
      })
    },
    // 任务状态修改
    toggleState(row) {
      // 根据 enablestate 判断是启用还是停用
      let text = row.enableState === 0 ? "启用" : "停用";
      let query = {
        state: row.enableState === 1 ? "0" : "1",
        id: row.id
      };
      // 弹出确认框
      this.$confirm(`确认要${text}此项任务吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 更新状态
        nccBasicSkuInfoEnableStatusUpdate(query).then(res => {
          // 显示成功消息
          this.$message({
            type: 'success',
            message: `${text}成功!` // 根据操作状态来动态显示消息
          });
          this.getNccCommoditiesList(); // 这里假设有一个方法用于刷新列表数据
        }).catch(error => {
          // 错误处理
          this.$message({
            type: 'error',
            message: `操作失败: ${error.message || '未知错误'}` // 显示错误消息
          });
        });
      }).catch(() => {
        // 用户取消了操作
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    getNccCommoditiesList() {
      findNccBasicSkuInfoData(this.queryList).then(response => {
        this.commoditiesList = response.rows;
        this.total = response.total;
      });
    },
    //新增/修改后刷新列表
    addSuccess() {
      this.getNccCommoditiesList();
    },
    clearAll() {
      this.queryList = {};
      this.getNccCommoditiesList();
    },
    filterDire() {
      this.getNccCommoditiesList()
    },
    addDialog(type, row) {
      this.visible = true;
      this.$refs.commodityAddRef.openDialog(type, row);
    },
    handleSizeChange(newsize) {
      this.queryList.pageNum = 1
      this.queryList.pageSize = newsize
      this.getNccCommoditiesList()
    },
    handleCurrentChange(newpage) {
      this.queryList.pageNum = newpage
      this.getNccCommoditiesList()
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.btn el-button {
  margin-bottom: 20px;
}

.el-pagination {
  float: right;
  margin: 20px;
}
</style>
